<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:rich="http://richfaces.org/rich"
      xmlns:a4j="http://richfaces.org/a4j"
      xmlns:core="http://www.contact.core.com/contacts/core/ui"
      xmlns:common="http://www.contact.common.com/contacts/ui"
        >

<ui:component>
    <style type="text/css">
        .top {
            vertical-align: top;

        }

        .wallCollor {
            background: #F7F7F7;
        }


    </style>


    <!--@elvariable id="wallData" type="rs.contacts.core.core.data.WallExt"-->
    <!--@elvariable id="idWallPost" type="java.lang.String"-->
    <!--@elvariable id="reRender" type="java.lang.Object"-->
    <!--@elvariable id="index" type="java.lang.Integer"-->

    <rich:panel id="oneWallRow"
                style="overflow:auto;border:none"
                bodyClass="rich-laguna-panel-no-header"
                onmouseover="var removeLink = #{common:inViewElement('removeComment')}; if (removeLink) removeLink.style.display='block';"
                onmouseout="var removeLink = #{common:inViewElement('removeComment')}; if (removeLink) removeLink.style.display='none';"
            >
        <a4j:outputPanel layout="block">
            <a4j:outputPanel layout="block" style="float:left;">
                <!--<h:graphicImage value="./style/images/noImage.PNG" style="resize:both; width: 100px;"/>-->
                <core:pictureForView style="resize:both; width: 70px;"
                                     pictureKey="photoprofile_#{wallData.informationId}"
                                     informationId="#{wallData.informationId}"/>
            </a4j:outputPanel>
            <a4j:outputPanel id="removeWallComment_#{wallData.id}"
                             rendered="#{wallData.informationId == accountSessionBean.accountInformationId}"
                             layout="block"
                             style="float:right;">
                <h:panelGroup layout="block"
                              style="width:40px;height:15px;"
                        >
                    <a4j:commandLink id="removeComment"
                                     value="#{resources.removeLabel}"
                                     action="#{wallBean.deletePostComment}"
                                     reRender="#{reRender}"
                                     style="display:none;"
                            >
                        <f:param name="deletePostComment"
                                 value="#{wallData.id}"/>
                    </a4j:commandLink>
                </h:panelGroup>
            </a4j:outputPanel>
            <a4j:outputPanel layout="block" style="float:left;">
                <a4j:outputPanel layout="block" style="vertical-align:top; width:100%">
                    <h:outputLabel value="#{wallData.firstName} #{wallData.lastName} " style="color:blue;"/>
                    <h:outputLabel value="#{wallData.comment} "/>
                </a4j:outputPanel>
                <a4j:outputPanel style=" width:100%" layout="block">
                    <h:panelGrid columns="3">
                        <h:outputText value="#{wallData.rowTimestamp}">
                            <f:converter converterId="timeLapseConvertor"/>
                        </h:outputText>

                        <a4j:commandLink value="#{resources.commentLabel}" onclick="#{common:inViewElement('commentTextArea')}.focus();"/>
                    </h:panelGrid>

                </a4j:outputPanel>
                <a4j:outputPanel layout="block" style="width:360px" id="childsWallComment_#{wallData.id}">
                    <a4j:repeat value="#{wallData.childs}" var="child">
                        <a4j:outputPanel styleClass="wallCollor"
                                         style="width:100%; margin:2px;cursor:default;"
                                         layout="block">
                            <h:panelGrid columns="2" rowClasses="top, top">
                                <core:pictureForView style="resize:both; width: 40px;"
                                                     pictureKey="photoprofile_#{child.informationId}"
                                                     informationId="#{child.informationId}"/>
                                <a4j:outputPanel layout="block" style="width:100%">
                                    <a4j:outputPanel layout="block" style="width:100%">
                                        <h:outputLabel value="#{child.firstName} #{child.lastName}"
                                                       style="color:blue;"/>
                                        <h:outputLabel value="#{child.comment}"/>
                                    </a4j:outputPanel>
                                    <a4j:outputPanel layout="block"
                                                     style="width:100%">
                                        <h:panelGrid columns="2" columnClasses="top, top">
                                            <h:outputText value="#{child.rowTimestamp}">
                                                <f:converter converterId="timeLapseConvertor"/>
                                            </h:outputText>
                                            <a4j:commandLink value="#{resources.deleteLabel}"
                                                             action="#{wallBean.deletePostComment}"
                                                             reRender="oneWallRow"
                                                             rendered="#{accountSessionBean.accountInformationId eq child.informationId
                                                                        or accountSessionBean.accountInformationId eq child.wallKey}"
                                                    >
                                                <f:param name="deletePostComment"
                                                         value="#{child.id}"/>
                                            </a4j:commandLink>
                                        </h:panelGrid>
                                    </a4j:outputPanel>
                                </a4j:outputPanel>
                            </h:panelGrid>
                        </a4j:outputPanel>
                    </a4j:repeat>
                </a4j:outputPanel>

                <!--styleClass="rich-menu-item-hover"-->
                <a4j:outputPanel style="width:360px;  margin:2px;cursor:default;"
                                 layout="block" styleClass="wallCollor">
                    <h:panelGrid columns="2" style="background:inherit;" columnClasses="top, top">
                        <a4j:outputPanel id="commentWallPicture"
                                         layout="block"
                                         style="display:none; background:inherit; float:left; vertical-align:top; background-color:transparent;">
                            <core:pictureForView style="resize:both; width: 50px;"
                                                 pictureKey="photoprofile_#{accountSessionBean.accountInformationId}"
                                                 informationId="#{accountSessionBean.accountInformationId}"/>
                        </a4j:outputPanel>
                        <a4j:outputPanel layout="block"
                                         style="float:right; background:inherit; margin-left:2px;">
                            <a4j:outputPanel layout="block" style="width:100%; background: inherit;">
                                <h:inputTextarea id="commentTextArea" cols="65" rows="1"
                                                 value="#{wallBean.myComment}"
                                                 style="position:relative;width:100%; min-height:14px; overflow:auto"
                                                 onblur="
                                                      if (this.value == '')
                                                      {
                                                        #{common:inViewElement('commentWallButton')}.style.display='none';
                                                        #{common:inViewElement('commentWallPicture')}.style.display='none';
                                                        #{common:inViewElement('commentLabel')}.style.zIndex = 1;
                                                        this.style.rows='1';
                                                         this.style.minHeight='14px';
                                                      }"
                                                 onfocus="
                                                     #{common:inViewElement('commentLabel')}.style.zIndex = 0;
                                                     #{common:inViewElement('commentWallButton')}.style.display='inline';
                                                     #{common:inViewElement('commentWallPicture')}.style.display='block';
                                                     this.style.rows='2';
                                                     this.style.minHeight='29px';"
                                        >
                                    <h:outputLabel id="commentLabel"
                                                   style="margin: 3px; color:gray; cursor:text;  text-align:center; position: absolute; z-index:#{empty wallBean.myComment ? 1 : 0};"

                                                   value="#{resources.writeACommentText}"/>
                                </h:inputTextarea>
                            </a4j:outputPanel>
                            <a4j:outputPanel layout="block"
                                             style="width:100%;text-align:right;background-color:transparent;">

                                <a4j:commandButton id="commentWallButton"
                                                   value="#{resources.commentLabel}"
                                                   style="display:none;"
                                                   action="#{wallBean.postComment}"
                                                   reRender="oneWallRow">
                                    <f:param name="personalWallComment"
                                             value="#{wallData.id}"/>
                                </a4j:commandButton>
                            </a4j:outputPanel>
                        </a4j:outputPanel>
                    </h:panelGrid>

                </a4j:outputPanel>

            </a4j:outputPanel>


        </a4j:outputPanel>
    </rich:panel>

</ui:component>


</html>
